<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover">
    <script src="data.js" charset="utf-8"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            -ms-box-sizing: border-box;
            box-sizing: border-box;
            border: 0;
        }
        .clearfix:after{
            display:table;
            clear:both;
            content:"";
        }
        .fl{
            float:left;
        }
        html,body{
            height:100%;
        }
        .top{
            height:1.375rem;
            min-height:1.375rem;
            background:rgba(0,0,0,.5);
        }
        .bottom{
            position:fixed;
            bottom:0px;
            left:0px;
            right:0px;
            width:100%;
            height:1.5625rem;
            background:#ccc;
        }
        .cnt{
            background: #f7f7f7;
            height:17.90625rem;
        }
        .cnt .sub_nav{
            width:2.65625rem;
            height:100%;
            background: #e9e9e9;
            overflow-y:auto;
            font-size:14px;
            color:#666666;
        }
        .cnt .cat_list{
            overflow-y:auto;
            font-size:12px;
        }
        .sub_nav>div{
            height:1.25rem;
            line-height:1.25rem;
            text-align:center;
        }
        .div_active{
            background:white;
            color: #f57a89;
        }

        .cnt .cat_list{
            width:7.1875rem;
            height:100%;
            background: #ffffff;
        }
        .cat{
            margin-left:0.25rem;
            margin-bottom:0.25rem;

        }
        .smallcatList{
            margin:0.625rem auto;
        }
        .jiantou{
            margin-top:0.125rem;
            margin-left:0.4rem;
            transform:scale(.6) ;
        }
        input{
            width:6rem;
            margin-top:0.28125rem;
            padding:0.15625rem 0.3125rem;
            border-radius: 1.5625rem;
            text-indent: 1.5em;
            margin-left:0.625rem;
            outline: none;
            background: #ffffff url(images/icon1.png) no-repeat 0.25rem 0.125rem;
        }
        ::-webkit-scrollbar {
            /*隐藏滚轮*/
            display: none;
        }
        .cat div{
            color:#666666;
            text-align: center;
        }
        .cat_list>div{
            color: #404040;
            margin-top:0.3125rem;
            margin-left:0.1875rem;
        }
    </style>
</head>
<body>
<div class="all">
    <div class="top">
        <div class="jiantou fl"><a href="#"><img src="images/zuojiantou.png"/></a></div>
        <div class="fl"><input placeholder="搜索"/></div>
    </div>
    <div class="cnt clearfix">
        <div class="sub_nav fl" id="leftnav"></div>
        <div class="cat_list fr" id="cat_list"></div>
    </div>
    <div class="bottom"></div>
</div>

<script>
    console.log(data);
    var arrs=data.json.keywordAreas;
    for(var i=0;i<arrs.length;i++){
        var a=arrs[i];
        var navLi=document.createElement("div");
        navLi.index=i;
        navLi.onclick=function(){
            loadCatData(this.index);
            clearNavLiClassName();
            this.className="div_active";
        }
        if(i==0){
            navLi.className="div_active";
        }
        navLi.innerHTML=a.areaName;
        leftnav.appendChild(navLi);
    }

    function clearNavLiClassName(){
        var divs=leftnav.getElementsByTagName("div");
        for(var i=0;i<divs.length;i++){
            divs[i].className="";
        }
    }
    loadCatData(0);
    function loadCatData(num){
        cat_list.innerHTML="";
        var arrs2=arrs[num].level1words;

        for(var j=0;j<arrs2.length;j++){
            var a2=arrs2[j];
            var navLi=document.createElement("div");
            navLi.innerHTML=a2.keyword;
            navLi.style.fontWeight="700";
            navLi.style.fontSize="14px";
            cat_list.appendChild(navLi);

            var smallcatList=document.createElement("div");
            smallcatList.className="smallcatList clearfix";
            var arrs3=a2.level2words;
            for(var k=0;k<arrs3.length;k++){
                var a3=arrs3[k];

                var catDiv=document.createElement("div");
                catDiv.className="cat fl";

                catDiv.style.width = "29%";
                var imageDiv = document.createElement("img");
                imageDiv.src = "http:"+a3.imageUrl;
                imageDiv.style.width = "100%";
                var txtDiv = document.createElement("div");
                txtDiv.innerHTML = a3.keyword;


                txtDiv.onclick = function(){
                    location = 'https://so.m.jd.com/ware/search.action?keyword='+this.innerHTML
                        +'&searchFrom=category';
                };
                catDiv.appendChild(imageDiv);
                catDiv.appendChild(txtDiv);
                smallcatList.appendChild(catDiv);
            }
            cat_list.appendChild(smallcatList);
        }
    }
</script>
</body>
</html>